<template>
	<div class="stu" style="position: relative;">
		<img src="https://www.kcrobots.com/xrobot/wp-content/uploads/2020/08/banner1-1.png" style="width:1532px;height:400px;" />
		<br />
		
	<div style="width:1100px;margin: 0 auto;">
		<div id="zxLayout" style="width:1100px;margin:0 auto;padding-top:50px;float: left;">
			<div v-if="datas" id="zxImg" style="width:400px;float:left;">
				<div v-if="datas.urlbox"><img v-if="datas.urlbox[indexs]" :src="datas.urlbox[indexs]" style="width:400px;height:380px;margin: 0px 0 30px 0;" /></div>
				<div id="img2" style="width:400px;height:76px;margin-top:30px;">
					<div id="spec_left" @click="aleft">
						<img src="../assets/img/zuo.png" style="width: 14px;height: 25px;margin: 10px 0;">
					</div>
					<div id="spec_list">
						<ul>
							<li id="current" @click="show(i,index)" v-for="(i,index) in datas.urlbox"><img :src="i" style="width:100%;height:100%;" /></li>
						</ul>
					</div>
					<div id="spec_right" @click="aright">
						<img src="../assets/img/you.png" style="width: 14px;height: 25px;margin: 10px 0;">
					</div>
				</div>
			</div>
			<div id="zxText" style="width:660px;height:542px;margin-left:440px;font-size:14px;">
				<p style="font-size:18px;font-weight:bold;">{{datas.title}}</p>
				<p>库存：99</p>
				<p>销量：10</p>
				<p>规格：<span style="padding: 3px 11px;color: #cc0c0f;border:2px solid #cc0c0f;">默认</span></p>
				<p style="line-height:30px;">介绍：{{datas.value1}}</p>
			</div>
		</div>
		
		<div id="detailTable" style="margin-top: 70px;float:left;margin-bottom:200px;">
			<ul id="detailTab">
				<li :class="{detailCur:itme==0,detailCur2:itme!=0}" @click="itme=0">
					<p>宝贝详情</p>
				</li>
				<li :class="{detailCur:itme==1,detailCur2:itme!=1}" @click="itme=1">
					<p>产品评论</p>
				</li>
			</ul>
			<div id="detailConter" v-show="itme==0">
				
			 <div style="float:left;" v-for="i in datas.url2">
				 <img :src="i" style="width: 1200px;">
			 </div>
			 
			</div>
			<div style="margin-top: 20px;" v-show="itme==1">
				<div id="comment">
					<img src="../assets/img/jishi.png" alt="">
					<span>暂时还没有评论哦！</span>
				</div>
			</div>
		</div>
		
	  </div>
	</div>
</template>

<script>
	export default {
		name: "stu",
		components: {}, //声明子组件
		computed: {},
		data() {
			return {
				indexs: 0,
				itme: 0,
				datas:{},
			};
		},
		methods: {
			show(i, index) {
				this.indexs = index;
			},
			aleft() {
				if (this.indexs == 0) {
					this.indexs = 0;
				} else {
					this.indexs--;
				}
				console.log(this.indexs);
			},
			aright() {
				if (this.indexs == this.datas.urlbox.length - 1) {
					this.indexs = this.datas.urlbox.length - 1;
				} else {
					this.indexs++;
				}
				console.log(this.indexs);
			},
			detailLeft() {},
			detailRight() {}
		},
		mounted() {
			document.body.scrollTop = document.documentElement.scrollTop = 0;
			this.datas = this.$store.state.cpbox[this.$store.state.index][this.$route.query.num];
			// console.log(this.$route.query.num)
		},
	};
</script>
<style scoped="scoped">
	#spec_list li {
		overflow: hidden;
		float: left;
		object-fit: contain;
		list-style: none;
		width: 60px;
		height: 60px;
		margin: 0 4px;
		padding: 2px;
		cursor: pointer;
	}

	#spec_list li:hover {
		border: 2px solid rgba(81, 45, 167, 1);
		padding: 0;
	}

	#spec_left {
		float: left;
		width: 30px;
		height: 46px;
		cursor: pointer;
	}

	#spec_right {
		float: right;
		width: 30px;
		height: 46px;
		cursor: pointer;
	}

	#zxText p {
		padding: 10px;
		text-align: left;
	}

	#detailTable {
		width: 1100px;
		/* height: 640px; */
		margin: 0 auto;
		
	}

	#detailTab {
		width: 1100px;
		height: 48px;
		background: #F5F5F5;
		margin-top: 20px;
	}

	#detailTable #detailTab li {
		list-style: none;
		float: left;
		font-size: 14px;
		padding: 0 40px;
		text-align: center;
		line-height: 48px;
	}

	.detailCur {
		background: rgba(81, 45, 167, 1);
		color: white;
	}

	.detailCur2 {
		background: #F5F5F5;
		color: #2c3e50;
	}

	#detailConter {
		width: 1100px;
		/* height: 2042px; */
		padding-top:30px;
		/* position: absolute; */
		float: left;
	}

	#detailConter img {
		/* float: left; */
			
	}

	#comment {
		font-size: 18px;
		text-align: center;
		height: 200px;
		line-height: 200px;
		margin: 60px 0;
	}

	#comment span {
		display: inline-block;
		vertical-align: middle;
	}

	#comment img {
		width: 34px;
		height: 34px;
		margin: 0 10px 0 0;
		display: inline-block;
		vertical-align: middle;
	}
</style>
